<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><app:appName/></title>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'login.css')}" type="text/css">
    <r:external dir="js" file="project.js"/>
    <g:javascript library="jquery" plugin="jquery"/>
    <r:layoutResources/>
    <jq:jquery>
        $("#userId").focus();
        $("#userId").val("super");
        $("#userPwd").val("super@)!@");
        //doLogin();
    </jq:jquery>
    <script type="text/javascript">
        function resetForm() {
            $("#userId").val("");
            $("#userPwd").val("");
        }

        function doLogin(){
            $("#msg").html("");
            if($("#userId").val() == ""){
                $("#msg").html("<g:message code='appLogin.userName.label'/>不允许为空");
                $("#userId").focus();
                return false;
            }
            if($("#userPwd").val() == ""){
                $("#msg").html("<g:message code='appLogin.passWord.label'/>不允许为空");
                $("#userPwd").focus();
                return false;
            }
            $("#loginForm").submit();
        }

        function doLoginUID(evt){
            var evtObj = getEvent(evt);
            if (evtObj.keyCode == 13) {
                if($("#userId").val() == ""){
                    $("#msg").html("<g:message code='appLogin.userName.label'/>不允许为空");
                    $("#userId").focus();
                    return false;
                }
                if($("#userPwd").val() == ""){
                    $("#userPwd").focus();
                }else{
                    doLogin();
                }
            }else{
                return false;
            }
        }

        function doLoginPWD(evt){
            var evtObj = getEvent(evt);
            if (evtObj.keyCode == 13)
                doLogin();
        }
    </script>
</head>

<body>

<div id="login">

    <div id="top">
        <div id="top_left"><img src="${resource(dir: 'images/login', file: 'login_03.gif')}" alt="ApplicationLogin Logo"/></div>

        <div id="top_center"></div>
    </div>

    <div id="center">
        <div id="center_left"></div>

        <div id="center_middle">
            <g:form name="loginForm" action="authenticate" useToken="true" method="post">
                <div id="fail_msg" class="errors">
                    <span id="msg" style="color: red;"></span>
                    <g:if test="${flash.message}">
                        <div style="color: red;">${flash.message}</div>
                    </g:if>
                </div>

                <div id="user"><strong><g:message code="appLogin.userName.label" default="UserName"/></strong>
                    <g:textField name="userId" value="${params?.userId}" onkeypress="doLoginUID(event);"/>
                </div>

                <div id="password"><strong><g:message code="appLogin.passWord.label" default="PassWord"/></strong>
                    <g:passwordField name="userPwd" value="" onkeypress="doLoginPWD(event);"/>
                </div>

                <div id="btn">
                    <a href="#" onclick="doLogin();"><g:message code="appLogin.login.label" default="Login"/></a>
                    <a href="#" onclick="resetForm();"><g:message code="appLogin.reset.label" default="Reset"/></a>
                </div>
            </g:form>
        </div>

        <div id="center_right"></div>
    </div>

    <div id="down">
        <div id="down_left">
            <div id="inf">
                <span class="inf_text"><g:message code="project.copyRight.label" default="CopyRight"/></span>
                <span class="copyright"><app:appName/> <app:appVersion/> <g:message code="project.copyRight"/></span>
            </div>
        </div>
        <div id="down_center"></div>
    </div>

</div>
</body>
</html>
